<template>
	<view scroll-y="true">
		<view v-for="i in data">
			<view class="top">
				<swiper class="swiper" :indicator-dots="true" circular :interval="3000" indicator-active-color="#fff"
					:duration="1000">
					<swiper-item>
						<video src="http://127.0.0.1:3000/upload/NtNCkFwsUpQl3_4gsHzwaXGz.mp4" controls></video>
					</swiper-item>
					<swiper-item v-for="img in i.album">
						<image class="imgg" :src="img" mode=""></image>
					</swiper-item>
				</swiper>


			</view>
			<view class="name">
				{{i.name}}
			</view>
			<view class="price">
				<view>
					卷后￥<text class="iprice">{{i.price}}</text>起
				</view>
				<text class="inventory">已售{{i.inventory}}+</text>
			</view>
			<view class="controls">
				<image class="aq" src="../../static/安全保障.png" mode=""></image>
				<view>先用后付 可0元下单，确认收货后再付款</view>
			</view>
			<view class="control">
				<image class="aq" src="../../static/快递.png" mode=""></image>
				<view>
					<view>预计4小时内发货 | 承诺48小时内发货</view>
					<view :style="{color: '#A7A7A7'}">{{i.address}} 快递：免运费</view>
				</view>
			</view>
			<view class="control">
				<image class="aq" src="../../static/喜欢.png" mode=""></image>
				<view>
					<view :style="{color: '#A7A7A7'}">假一赔四 退货宝 极速退款 7天无理由退换</view>

				</view>
			</view>
			<view class="control">
				<image class="aq" src="../../static/完成.png" mode=""></image>
				<view>

					<view :style="{color: '#A7A7A7'}">基础包装</view>
				</view>
			</view>
			<h2>宝贝详情</h2>
			<view v-for="(item) in i.details" class="imgs">
				<image :src="item" mode="widthFix"></image>
			</view>
			<view class="shop">
				<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
					@buttonClick="buttonClick" />
			</view>
			<view class="showbox" v-show="open">
				<view class="shopbox">
					<uni-icons type="closeempty" @click="close" size="25" class="close"></uni-icons>
					<view class="address">
						<view class="">
							<view class="address-1">
								<view><uni-icons type="location" size="25"></uni-icons></view>
								<view class="title">
									李斯特 1367789078
								</view>
							</view>
							<view class="content">
								快递 包邮 退货宝 承诺今天发货,预计11月7日...
							</view>
						</view>
						<view class="iconr">
							<uni-icons type="forward" size="15"></uni-icons>
						</view>
					</view>
					<view class="shoping">
						<view class="imgbox">
							<image class="imgurl" :src="data[0].Buy[0].imgurl" mode=""></image>
						</view>
						<view class="pricebox">
							<view class="textcolor">实付 ￥ {{sfprice}} | 优惠前 ￥{{sumprice}}</view>
							<view class="yhq">共减 ￥{{data[0].coupon}}<uni-icons type="forward" size="15"
									color="#FF5000"></uni-icons></view>
							<view>
								<uni-number-box :value="num" :step="1" @change="xg" />
							</view>
						</view>
					</view>
					<text class="text">商品类型({{data[0].Buy.length}})</text>
					<view scroll-y class="databox1">
						<view :class="selectd==index?'data1':'data'" v-for="(i,index) in data[0].Buy" :key="i"
							@click="getda(i,index)">
							<image class="imgurl" :src="i.imgurl" mode="heightFix"></image>
							<view class="content">
								{{i.content}}
							</view>
							<text>￥{{i.price}}</text>
						</view>
					</view>
					<view class="but1">
						<button v-show="butcontent==0" type="primary" class="butt" @click="addshopcar">加入购物车</button>
						<button v-show="butcontent==1" type="primary" class="butt">立即支付￥{{countprice}}</button>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script setup lang="ts">
	import { ref, computed, onMounted } from 'vue'
	import { onLoad } from '@dcloudio/uni-app';
	let getda = (data, i) => {
		selectd.value = i
		goshops.value = data
	}
	let xg = (e : number) => {
		num.value = e
	}
	let butcontent = ref(0)
	let goshops = ref([])
	let address = ref([])
	let addshopcar = () => {
		console.log(goshops.value);
		uni.request({
			url: 'http://127.0.0.1:3000/xaw/addshopcar',
			method: 'POST',
			data: {
				name: data.value[0].name,
				img: goshops.value.imgurl,
				title: goshops.value.content,
				num: num.value,
				price: goshops.value.price,
				sid: id.value,
				coupon: (goshops.value.price - data.value[0].coupon).toFixed(2)
			},
			success(res : any) {
				open.value = false
				getdata()
				uni.showToast({
					title: '加入成功',
					icon: "success"
				})
			}
		})
	}
	const getAddress = () => {
		uni.chooseLocation({
			success: res => {
				console.log(res);
				// console.log('位置名称：' + res.name);
				// console.log('详细地址：' + res.address);
				// console.log('纬度：' + res.latitude);
				// console.log('经度：' + res.longitude);
			}
		});
	}
	let getdata = () => {
		uni.request({
			url: 'http://127.0.0.1:3000/xaw/getshopcar',
			success(res) {

				options.value[2].info = res.data.data.length
			}
		})
	}
	onMounted(() => {
		getdata()
		uni.request({
			url: 'http://127.0.0.1:3000/xaw/getaddr',
			method: 'GET',
			success(res : any) {
				address.value = res.data.data
				console.log(res);
			}
		})
	})
	let selectd = ref(0)
	let num = ref(1)
	let open = ref(false)
	let data = ref([])
	let type = ref('')
	let sumprice = computed(() => {
		return data.value[0].Buy[selectd.value].price + 5
	})
	let sfprice = computed(() => {
		return data.value[0].Buy[selectd.value].price
	})
	let countprice = computed(() => {
		return (data.value[0].Buy[selectd.value].price * num.value).toFixed(2)
	})
	let options = ref([{
		icon: 'headphones',
		text: '客服'
	}, {
		icon: 'shop',
		text: '店铺',
		infoBackgroundColor: '#007aff',
		infoColor: "red"
	}, {
		icon: 'cart',
		text: '购物车',
		info: 2
	}])
	let buttonGroup = ref([{
		text: '加入购物车',
		backgroundColor: '#ff0000',
		color: '#fff'
	},
	{
		text: '立即购买',
		backgroundColor: '#ffa200',
		color: '#fff'
	}
	])
	let onClick = (e) => {
		if (e.index == 2) {
			uni.navigateTo({
				url:'/pages/shopping/shopping'
			})
		}
		// uni.showToast({
		// 	title: `点击${e.content.text}`,
		// 	icon: 'none'
		// })
	}
	let buttonClick = (e) => {
		if (e.index == 0) {
			open.value = true
			butcontent.value = 0
		}
		else if (e.index == 1) {
			open.value = true
			butcontent.value = 1
		}
		// options.value[2].info++
	}
	let id = ref('')
	let getShop = () => {
		uni.request({
			url: 'http://127.0.0.1:3000/xaw/getshop',
			method: 'GET',
			data: { id: id.value },
			success(res : any) {
				console.log(res.data.data);
				data.value = res.data.data

			}
		})
	}
	let close = () => {
		open.value = false
	}
	onLoad(query => {
		id.value = query.id
		getShop()

	})
</script>

<style lang="scss">
	.shop {
		width: 750rpx;
		height: 100rpx;
		position: fixed;
		bottom: 0;
	}


	.top {
		width: 750rpx;
		height: 450rpx;
		background-color: skyblue;

		.swiper {
			width: 750rpx;
			height: 450rpx;

			.imgg {
				width: 750rpx;
				height: 450rpx;
			}
		}

		video {
			width: 100% !important;
		}

	}

	.name {
		font-weight: bold;
		font-size: 18px;
	}

	.price {
		padding: 10rpx;
		display: flex;
		justify-content: space-between;
		color: #FF5000;
		font-size: 17px;
		align-items: center;

		.iprice {
			font-size: 27px;
			font-weight: bolder;
		}

		.inventory {
			color: #828282;
		}


	}

	.controls {
		display: flex;
		color: #2DA07C;
		background-color: #E6F6F3;
		border-radius: 6rpx;
		padding: 10rpx;

		width: 95%;
		margin: auto;
		margin-bottom: 20rpx;
		box-sizing: border-box;
	}

	.control {
		display: flex;
		color: #2DA07C;
		border-radius: 6rpx;
		padding: 10rpx;

		width: 95%;
		margin: auto;
		box-sizing: border-box;
	}

	h2 {
		margin-left: 20rpx;
	}

	.imgs {
		width: 750rpx;
		margin-top: 20rpx;
		display: flex;

		image {
			width: 750rpx;
		}
	}

	.aq {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.showbox {
		width: 750rpx;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 1000;
		position: fixed;
		bottom: 0;

		.shopbox {
			border-top-right-radius: 50rpx;
			border-top-left-radius: 50rpx;
			width: 750rpx;
			height: 1100rpx;
			background-color: #fff;
			position: fixed;
			bottom: 0;

			.databox1 {
				width: 750rpx;
				padding: 30rpx;
				box-sizing: border-box;
				height: 270px;
				overflow: auto;

				.data1 {
					box-sizing: border-box;
					width: 100%;
					height: 80rpx;
					border: 2px solid #FF5000;
					background-color: #FFF6F1;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;
					border-radius: 10rpx;

					.content {
						white-space: nowrap;
						/* 不换行 */
						overflow: hidden;
						/* 超出部分隐藏 */
						text-overflow: ellipsis;
						/* 使用省略号表示 */
						width: 650rpx;
					}

					image {
						margin-right: 20rpx;
						width: 80rpx;
						height: 80rpx;
						border-radius: 10rpx;
					}
				}

				.data {
					box-sizing: border-box;
					width: 100%;
					height: 80rpx;
					background-color: #F7F7F7;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;
					border-radius: 10rpx;

					.content {
						white-space: nowrap;
						/* 不换行 */
						overflow: hidden;
						/* 超出部分隐藏 */
						text-overflow: ellipsis;
						/* 使用省略号表示 */
						width: 650rpx;
					}

					image {
						margin-right: 20rpx;
						width: 80rpx;
						height: 80rpx;
						border-radius: 10rpx;
					}
				}
			}

			.text {
				margin-left: 30rpx;
			}

			.shoping {
				width: 750rpx;
				height: 200rpx;
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				.pricebox {
					.textcolor {
						color: #FF5000;
						font-size: 26rpx;
						font-weight: 900;
					}

					.yhq {
						color: #FF5000;
						text-align: center;
						line-height: 40rpx;
						border-radius: 5rpx;
						width: 140rpx;
						height: 40rpx;
						font-size: 10rpx;
						background-color: #FFEEE3;
						box-sizing: border-box;
					}

					display: flex;
					flex-direction: column;
					gap: 8rpx;
				}

				.imgbox {
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx;
					background: #2DA07C;
					overflow: hidden;
					margin-left: 30rpx;
					margin-top: 20rpx;
					margin-right: 30rpx;

					.imgurl {
						width: 150rpx;
						height: 150rpx;
					}
				}
			}


			.address {
				margin-top: 60rpx;
				width: 750rpx;
				height: 130rpx;
				border-bottom: 1px solid rgba(0, 0, 0, 0.1);
				display: flex;
				align-items: center;
				justify-content: space-between;

				.iconr {
					margin-right: 35rpx;
				}

				.title {
					margin-left: 10rpx;
				}

				.content {
					text-indent: 2em;
					white-space: nowrap;
					/* 不换行 */
					overflow: hidden;
					/* 超出部分隐藏 */
					text-overflow: ellipsis;
					/* 使用省略号表示 */
					width: 650rpx;
				}

				.address-1 {
					display: flex;
				}
			}

			.close {
				position: absolute;
				top: 20rpx;
				right: 30rpx;
			}

			.but1 {
				width: 100%;
				display: flex;
				justify-content: center;
				padding-bottom: 10rpx;

				.butt {
					width: 98%;
					position: fixed;
					margin: auto;
					border-radius: 50rpx;
					background-color: #FF5000;
					bottom: 10rpx;

				}
			}

		}
	}
</style>